<template>
  <div :id="config.key">
    <img
      v-if="config.__config.mediaSrc"
      :src="mediaSrc"
      :style="style"
      :alt="config.__config.alt"
    />
    <div v-else class="static-media__no-data static-media__no-data--pure">
      请配置图片
    </div>
  </div>
</template>
<script>
import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
export default {
  name: "ImageMedia",
  computed: {},
  mixins: [myMixin, vmMixin],
  components: {},
  data() {
    return {};
  },

  vmEvents: {
    setUrl(src) {
      if(!src){
        return
      }
      this.config.__config.mediaLocation = "remote";
      this.config.__config.mediaSrc = src;
    },
  },

  computed: {
    path() {
      return process.env.VUE_APP_ROOT_URL !== "./" ? "/paas" : "";
    },
    mediaSrc() {
      const { mediaLocation: type, mediaSrc: src } = this.config.__config;
      if (type === "remote") {
        return src;
      } else if (process.env.NODE_ENV === "production") {
        return location.origin + this.path + src;
      } else {
        return "https://hanma-paas-dev.hancode.com" + this.path + src;
      }
    },
    style() {
      const {
        widthUnit,
        widthValue,
        heightUnit,
        heightValue,
      } = this.config.__config;
      return {
        display: "block",
        width: widthValue + widthUnit,
        height: heightValue + heightUnit,
      };
    }
  },

  async mounted() {},
  methods: {},
};
</script>

<style lang="scss">
.static-media {
  &__no-data {
    color: #ccc;
    font-size: 14px;

    &--pure {
      text-align: center;
      line-height: 48px;
    }
  }
}
</style>
